React useSyncExternalStore: Dominando a Integração de Estado Externo

O hook useSyncExternalStore do React, introduzido no React 18, fornece uma maneira poderosa e eficiente de integrar fontes de dados externas e bibliotecas de gerenciamento de estado em seus componentes React. Este hook permite que os componentes se inscrevam em mudanças em stores externos, garantindo que a UI sempre reflita os dados mais recentes enquanto otimiza o desempenho. Este guia oferece uma visão abrangente do useSyncExternalStore, cobrindo seus conceitos principais, padrões de uso e melhores práticas.

Entendendo a Necessidade do useSyncExternalStore

Em muitas aplicações React, você encontrará cenários onde o estado precisa ser gerenciado fora da árvore de componentes. Isso geralmente ocorre ao lidar com:

• Bibliotecas de terceiros: Integrar com bibliotecas que gerenciam seu próprio estado (ex: uma conexão de banco de dados, uma API do navegador ou um motor de física).
• Estado compartilhado entre componentes: Gerenciar estado que precisa ser compartilhado entre componentes que não estão diretamente relacionados (ex: status de autenticação do usuário, configurações da aplicação ou um barramento de eventos global).
• Fontes de dados externas: Buscar e exibir dados de APIs externas ou bancos de dados.

Soluções tradicionais de gerenciamento de estado como useState e useReducer são bem adequadas para gerenciar o estado local do componente. No entanto, elas não são projetadas para lidar com estado externo de forma eficaz. Usá-las diretamente com fontes de dados externas pode levar a problemas de desempenho, atualizações inconsistentes e código complexo.

useSyncExternalStore aborda esses desafios fornecendo uma maneira padronizada e otimizada de se inscrever em mudanças em stores externos. Ele garante que os componentes sejam renderizados novamente apenas quando os dados relevantes mudam, minimizando atualizações desnecessárias e melhorando o desempenho geral.

Conceitos Essenciais do useSyncExternalStore

useSyncExternalStore recebe três argumentos:

1. subscribe: Uma função que recebe um callback como argumento e se inscreve no store externo. O callback será chamado sempre que os dados do store mudarem.
2. getSnapshot: Uma função que retorna um snapshot dos dados do store externo. Esta função deve retornar um valor estável que o React pode usar para determinar se os dados mudaram. Ela deve ser pura e rápida.
3. getServerSnapshot (opcional): Uma função que retorna o valor inicial do store durante a renderização no lado do servidor. Isso é crucial para garantir que o HTML inicial corresponda à renderização no lado do cliente. É usada APENAS em ambientes de renderização no lado do servidor. Se omitida em um ambiente do lado do cliente, ela usa getSnapshot em seu lugar. É importante que este valor nunca mude depois de ser inicialmente renderizado no lado do servidor.

Aqui está uma análise de cada argumento:

1. subscribe

A função subscribe é responsável por estabelecer uma conexão entre o componente React e o store externo. Ela recebe uma função de callback, que deve ser chamada sempre que os dados do store mudarem. Esse callback é tipicamente usado para acionar uma nova renderização do componente.

Exemplo:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

Neste exemplo, store.addListener adiciona o callback à lista de listeners do store. A função retorna uma função de limpeza que remove o listener quando o componente é desmontado, prevenindo vazamentos de memória.

2. getSnapshot

A função getSnapshot é responsável por recuperar um snapshot dos dados do store externo. Este snapshot deve ser um valor estável que o React pode usar para determinar se os dados mudaram. O React usa Object.is para comparar o snapshot atual com o anterior. Portanto, ela deve ser rápida e é altamente recomendável que retorne um valor primitivo (string, número, booleano, nulo ou indefinido).

Exemplo:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

Neste exemplo, store.getData retorna os dados atuais do store. O React comparará este valor com o valor anterior para determinar se o componente precisa ser renderizado novamente.

3. getServerSnapshot (Opcional)

A função getServerSnapshot só é relevante quando a renderização no lado do servidor (SSR) é usada. Esta função é chamada durante a renderização inicial do servidor, e seu resultado é usado como o valor inicial do store antes que a hidratação aconteça no cliente. Retornar valores consistentes é crítico para um SSR bem-sucedido.

Exemplo:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

Neste exemplo, `store.getInitialDataForServer` retorna os dados iniciais apropriados para a renderização no lado do servidor.

Exemplo de Uso Básico

Vamos considerar um exemplo simples onde temos um store externo que gerencia um contador. Podemos usar useSyncExternalStore para exibir o valor do contador em um componente React:

            // Store externo
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Neste exemplo, createStore cria um store externo simples que gerencia o valor de um contador. O componente Counter usa useSyncExternalStore para se inscrever nas mudanças do store e exibir a contagem atual. Quando o botão de incremento é clicado, a função setState atualiza o valor do store, o que aciona uma nova renderização do componente.

Integração com Bibliotecas de Gerenciamento de Estado

useSyncExternalStore é particularmente útil para integrar com bibliotecas de gerenciamento de estado como Zustand, Jotai e Recoil. Essas bibliotecas fornecem seus próprios mecanismos para gerenciar estado, e useSyncExternalStore permite que você as integre perfeitamente em seus componentes React.

Aqui está um exemplo de integração com Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Store Zustand
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Componente React
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand simplifica a criação do store. Suas implementações internas de subscribe e getSnapshot são usadas implicitamente quando você se inscreve em um estado específico.

Aqui está um exemplo de integração com Jotai:

            import { atom, useAtom } from 'jotai'

// Átomo Jotai
const countAtom = atom(0)

// Componente React
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai usa átomos para gerenciar o estado. useAtom lida internamente com a inscrição e a captura de snapshots.

Otimização de Performance

useSyncExternalStore fornece vários mecanismos para otimizar a performance:

• Atualizações Seletivas: O React só renderiza novamente o componente quando o valor retornado por getSnapshot muda. Isso garante que renderizações desnecessárias sejam evitadas.
• Agrupamento de Atualizações: O React agrupa atualizações de múltiplos stores externos em uma única renderização. Isso reduz o número de renderizações e melhora o desempenho geral.
• Evitando Closures Obsoletas: useSyncExternalStore garante que o componente sempre tenha acesso aos dados mais recentes do store externo, mesmo ao lidar com atualizações assíncronas.

Para otimizar ainda mais o desempenho, considere as seguintes melhores práticas:

• Minimize a quantidade de dados retornada por getSnapshot: Retorne apenas os dados que são realmente necessários para o componente. Isso reduz a quantidade de dados que precisa ser comparada e melhora a eficiência do processo de atualização.
• Use técnicas de memoização: Memorize os resultados de cálculos caros ou transformações de dados. Isso pode prevenir recálculos desnecessários e melhorar o desempenho.
• Evite inscrições desnecessárias: Inscreva-se no store externo apenas quando o componente estiver realmente visível. Isso pode reduzir o número de inscrições ativas e melhorar o desempenho geral.
• Garanta que getSnapshot retorne um novo objeto *estável* apenas se os dados mudaram: Evite criar novos objetos/arrays/funções se os dados subjacentes não mudaram de fato. Retorne o mesmo objeto por referência, se possível.

Renderização no Lado do Servidor (SSR) com useSyncExternalStore

Ao usar useSyncExternalStore com renderização no lado do servidor (SSR), é crucial fornecer uma função getServerSnapshot. Esta função garante que o HTML inicial renderizado no servidor corresponda à renderização do lado do cliente, prevenindo erros de hidratação e melhorando a experiência do usuário.

Aqui está um exemplo de uso do getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Importante para SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Neste exemplo, getServerSnapshot retorna o valor inicial do contador. Isso garante que o HTML inicial renderizado no servidor corresponda à renderização do lado do cliente. O `getServerSnapshot` deve retornar um valor estável e previsível. Ele também deve executar a mesma lógica que a função getSnapshot no servidor. Evite acessar APIs específicas do navegador ou variáveis globais em getServerSnapshot.

Padrões de Uso Avançados

useSyncExternalStore pode ser usado em uma variedade de cenários avançados, incluindo:

• Integração com APIs do Navegador: Inscrever-se em mudanças em APIs do navegador como localStorage ou navigator.onLine.
• Criação de Hooks Personalizados: Encapsular a lógica para se inscrever em um store externo em um hook personalizado.
• Uso com a Context API: Combinar useSyncExternalStore com a Context API do React para fornecer estado compartilhado a uma árvore de componentes.

Vamos ver um exemplo de criação de um hook personalizado para se inscrever no localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Aciona manualmente o evento de storage para atualizações na mesma página
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Neste exemplo, useLocalStorage é um hook personalizado que se inscreve em mudanças no localStorage. Ele usa useSyncExternalStore para gerenciar a inscrição e recuperar o valor atual do localStorage. Ele também despacha corretamente um evento de storage para garantir que as atualizações na mesma página sejam refletidas (já que os eventos `storage` são disparados apenas em outras abas). O serverSnapshot garante que os valores iniciais sejam fornecidos corretamente em ambientes de servidor.

Melhores Práticas e Armadilhas Comuns

Aqui estão algumas melhores práticas e armadilhas comuns a serem evitadas ao usar useSyncExternalStore:

• Evite mutar o store externo diretamente: Sempre use a API do store para atualizar os dados. Mutar o store diretamente pode levar a atualizações inconsistentes e comportamento inesperado.
• Garanta que getSnapshot seja puro e rápido: getSnapshot não deve ter efeitos colaterais e deve retornar um valor estável rapidamente. Cálculos caros ou transformações de dados devem ser memorizados.
• Forneça uma função getServerSnapshot ao usar SSR: Isso é crucial para garantir que o HTML inicial renderizado no servidor corresponda à renderização do lado do cliente.
• Lide com erros de forma elegante: Use blocos try-catch para lidar com possíveis erros ao acessar o store externo.
• Limpe as inscrições: Sempre cancele a inscrição do store externo quando o componente for desmontado para evitar vazamentos de memória. A função subscribe deve retornar uma função de limpeza que remove o listener.
• Entenda as implicações de desempenho: Embora useSyncExternalStore seja otimizado para desempenho, é importante entender o impacto potencial de se inscrever em stores externos. Minimize a quantidade de dados retornada por getSnapshot e evite inscrições desnecessárias.
• Teste exaustivamente: Garanta que a integração com o store funcione corretamente em diferentes cenários, especialmente em renderização no lado do servidor e no modo concorrente.

Conclusão

useSyncExternalStore é um hook poderoso e eficiente para integrar fontes de dados externas e bibliotecas de gerenciamento de estado em seus componentes React. Ao entender seus conceitos principais, padrões de uso e melhores práticas, você pode gerenciar eficazmente o estado compartilhado em suas aplicações React e otimizar o desempenho. Seja integrando com bibliotecas de terceiros, gerenciando estado compartilhado entre componentes ou buscando dados de APIs externas, useSyncExternalStore oferece uma solução padronizada e confiável. Adote-o para construir aplicações React mais robustas, manuteníveis e performáticas para um público global.

Recursos Adicionais

• Documentação do React sobre useSyncExternalStore
• Pull Request do React 18 introduzindo o useSyncExternalStore
• Biblioteca de Gerenciamento de Estado Zustand
• Biblioteca de Gerenciamento de Estado Jotai